<template>
    <div class="table">
        <el-table
            :data="tableData"
            style="width: 100%"
            border
        >
            <el-table-column
                type="expand"
            >
                <template slot-scope="props">
                    <el-form
                        label-position="left"
                    >
                        <el-form-item 
                        v-for="(item, index) in expertInfo"
                        :key="index"
                        :label="item.label"
                        >
                            <span v-if="item.type !== 'image'" style="color: #333">{{ item.value }}</span>
                            <img :src="item.value" class="pre-image" v-if="item.type === 'image'" alt="" style="width: 70px;">
                        </el-form-item>
                        
                        <el-form-item>
                            <el-button type="text">加入黑名单</el-button>
                        </el-form-item>

                    </el-form>
                </template>
            </el-table-column>

            <el-table-column
                type="index"
            ></el-table-column>

            <el-table-column
                prop="realName"
                label="真实姓名"
            ></el-table-column>

            <el-table-column
                label="真实照片"
            >
                <template slot-scope="scope">
                    <img class="pre-image" style="width: 40px; height: 40px" src="https://imgsa.baidu.com/news/q%3D100/sign=24bd2b166563f6241a5d3d03b745eb32/adaf2edda3cc7cd95bb294f63701213fb80e9106.jpg" alt="" >
                </template>
            </el-table-column>

            <el-table-column
                prop="servePrice"
                label="服务价格"
            ></el-table-column>

            <el-table-column
                prop="expertIntroduce"
                label="专家简介"
            ></el-table-column>

            <el-table-column
                prop="expertMotto"
                label="座右铭"
            ></el-table-column>

            <el-table-column
                prop="fansNum"
                label="粉丝数目"
            ></el-table-column>

            <el-table-column
                prop="solveQuestionNum"
                label="解决问题数目"
            ></el-table-column>

            <el-table-column
                prop="answerQuestionNum"
                label="回答问题数目"
            ></el-table-column>

            <el-table-column
                label="操作"
            >
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="lookExpertInfo(scope.$index)">查看</el-button>
                    <el-button type="text" size="mini" @click="del(scope.$index)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <pre-image></pre-image>
    </div>
</template>

<script>
import PreImage from 'template/PreImage'


export default {
    name: 'Table',
    components: {
        PreImage
    },
    data () {
        return {
            tableData: [1],
            expertInfo: [{
                label: '性别',
                value: '男',
                type: 'enum'
            }, {
                label: '身份证正面照',
                value: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1764520101,2631908780&fm=85&app=52&f=JPEG?w=121&h=75&s=C813CF14414A64EA4A545DC20300E0B2',
                type: 'image'
            }]
        }
    },
    methods: {
        lookExpertInfo (index) {
            this.$emit('lookExpertInfo', index);
        },
        del (index) {
            
        }
    }
}
</script>

<style lang="stylus" scoped>
    .table
        width 100%
        
</style>


